<vdr-page-block>
    <vdr-action-bar>
        <vdr-ab-left></vdr-ab-left>

        <vdr-ab-right>
            <vdr-action-bar-items locationId="tax-rate-detail" />
            <button
                class="btn btn-primary"
                *ngIf="isNew$ | async; else updateButton"
                (click)="create()"
                [disabled]="!saveButtonEnabled()"
            >
                {{ 'common.create' | translate }}
            </button>
            <ng-template #updateButton>
                <button
                    class="btn btn-primary"
                    (click)="save()"
                    [disabled]="!saveButtonEnabled()"
                    *vdrIfPermissions="updatePermission"
                >
                    {{ 'common.update' | translate }}
                </button>
            </ng-template>
            <vdr-action-bar-dropdown-menu locationId="tax-rate-detail" />
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>

<form class="form" [formGroup]="detailForm">
    <vdr-page-detail-layout>
        <vdr-page-detail-sidebar>
            <vdr-card>
                <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
                    <clr-toggle-wrapper>
                        <input
                            type="checkbox"
                            clrToggle
                            id="enabled"
                            formControlName="enabled"
                            [vdrDisabled]="!(updatePermission | hasPermission)"
                        />
                    </clr-toggle-wrapper>
                </vdr-form-field>
            </vdr-card>
            <vdr-card *ngIf="entity$ | async as entity">
                <vdr-page-entity-info [entity]="entity" />
            </vdr-card>
        </vdr-page-detail-sidebar>
        <vdr-page-block>
            <vdr-card>
                <div class="form-grid">
                    <vdr-form-field [label]="'common.name' | translate" for="name">
                        <input
                            id="name"
                            type="text"
                            formControlName="name"
                            [readonly]="!(updatePermission | hasPermission)"
                        />
                    </vdr-form-field>
                    <vdr-form-field [label]="'settings.rate' | translate" for="value">
                        <vdr-affixed-input suffix="%">
                            <input
                                id="value"
                                type="number"
                                step="0.1"
                                formControlName="value"
                                [readonly]="!(updatePermission | hasPermission)"
                            />
                        </vdr-affixed-input>
                    </vdr-form-field>
                    <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
                        <select
                            name="taxCategoryId"
                            formControlName="taxCategoryId"
                            [vdrDisabled]="!(updatePermission | hasPermission)"
                        >
                            <option
                                *ngFor="let taxCategory of taxCategories$ | async"
                                [value]="taxCategory.id"
                            >
                                {{ taxCategory.name }}
                            </option>
                        </select>
                    </vdr-form-field>
                    <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
                        <vdr-zone-selector
                            name="zoneId"
                            formControlName="zoneId"
                            [vdrDisabled]="!(updatePermission | hasPermission)"
                        >
                        </vdr-zone-selector>
                    </vdr-form-field>
                </div>
            </vdr-card>
            <vdr-card
                formGroupName="customFields"
                *ngIf="customFields.length"
                [title]="'common.custom-fields' | translate"
            >
                <vdr-tabbed-custom-fields
                    entityName="TaxRate"
                    [customFields]="customFields"
                    [customFieldsFormGroup]="detailForm.get('customFields')"
                ></vdr-tabbed-custom-fields>
            </vdr-card>
            <vdr-custom-detail-component-host
                locationId="tax-rate-detail"
                [entity$]="entity$"
                [detailForm]="detailForm"
            ></vdr-custom-detail-component-host>
        </vdr-page-block>
    </vdr-page-detail-layout>
</form>
